<template>
	<view class="page-container profile-container">
		<uni-nav-bar 
			title="职位列表"
			dark
			:fixed="true"
			status-bar
			left-icon="left"
			:border="false"
			@clickLeft="goBack" 
		/>
		<view class="top">
			<view 
				class="search" 
				:style="{top:`${searchTop}rpx`,transform:`scale(${scaleNum})`}"
			>
				<!-- <text class="icon-search iconfont"></text>搜索职位、公司 -->
				<icon class='icon' type="search" size="14" />
				<input
					v-model="searchName"
					class="searchInput" 
					type="text" 
					placeholder="搜索职位名称" 
					@input="onSearch"
					placeholder-class='placeholder' 
				/>
			</view>
		</view>
		<view class="work">
			<!-- <view class="title">
				<view class="title-inner">
				  <text>web前端</text>
				</view>
			</view> -->
			<view v-if='jobList && jobList.length'>
				<view class="wrap">
					<work-item 
						class='itemContent' 
						v-for="item in jobList" 
						:key="item.id" 
						:item="item"
					/>
				</view>
				<view :class="more?'loader':'noMore'">
					<view>{{more?'':'没有更多了~'}}</view>
				</view>
			</view>
			<view v-else class="noData">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import workItem from '../../components/workItem.vue';
	export default {
		data() {
			return {
				scaleNum: 1, //搜索框缩放
				searchTop: 176, // 搜索框据顶部高度
				jobList: [], // 职位列表
				currentPage: 1, // 当前分页
				pageSize: 10, // 分页条数
				offset: 0,
				// more:true,
				loadStatus: "more", // 加载状态
				typeId: '', // 分类id
				searchName: '', // 职位搜索名称
				timer: null // 定时器
			}
		},
		onLoad(options) {
			const {
				id
			} = options;
			this.typeId = id;
		},
		onReady() {
			this.getJobList()
		},
		components: {
			workItem
		},
		methods: {
			// 获取职位列表
			getJobList() {
				this.$api.jobList({
					page: this.currentPage,
					name: this.searchName ? this.searchName : '',
					pageSize: this.pageSize,
					typeId: this.typeId
				}).then(res => {
					if (res.code == 200) {
						this.total = res.data.totalCount;
						this.more = !!res.data.rows.length;
						if (this.currentPage == 1) {
							this.jobList = res.data.rows;
							if (this.jobList.length < this.total) {
								this.loadStatus = "more";
							} else {
								this.loadStatus = "no-more";
							}
						} else {
							this.loadStatus = "loading";
							setTimeout(() => {
								this.jobList = this.recommendList.concat(res.data.rows);
								if (this.jobList.length < this.total) {
									this.loadStatus = "more";
								} else {
									this.loadStatus = "no-more";
								}
							}, 1000)
						}

						uni.hideNavigationBarLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索职位
			onSearch(e) {
				// 需要防抖处理的函数
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(()=>{
					this.searchName = e.target.value;
					this.currentPage = 1;
					this.getJobList();
					this.timer = null
				},1000)
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		onPageScroll(res) {
			if (res.scrollTop > 60) {
				//防止滑动太快出现的res.scrollTop的值全部大于60
				this.searchTop = 56
				this.scaleNum = 0.6
				return
			}
			this.searchTop = 176 - res.scrollTop * 1.5
			if (1 - res.scrollTop / 60 >= 0.6) {
				this.scaleNum = 1 - res.scrollTop / 60
			} else {
				this.scaleNum = 0.6
			}
			uni.$emit('onPageScroll', res.scrollTop);
		},
		onReachBottom() {
			if (!this.more) return
			this.offset = this.offset + 15
			this.getJobList()
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 750rpx;
		height: 146rpx;
		background: $uni-color-primary;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 2;
	}

	.top {
		padding-top: 100rpx;
		background: var(--white);
		.search {
			display: flex;
			align-items: center;
			width: 678rpx;
			padding-left: 36rpx;
			border-radius: 10rpx;
			background: $uni-bg-color;
			height: 80rpx;
			color: #AAAAAA;
			line-height: 80rpx;
			position: fixed;
			left: 18rpx;
			z-index: 2;

			.icon {
				display: flex;
				margin-left: 3rpx;
			}
			
			.font {
				font-size: 28upx;
				line-height: 40upx;
				margin-left: 10upx;
			}
			
			.searchInput {
				// padding-top: 10rpx;
				width: 90%;
				height: 80rpx;
				font-size: 30upx;
				line-height: 80rpx;
				font-weight: bold;
				margin-left: 10upx;
			}
		}
	}

	.scroll-x {
		width: 1500rpx;
		display: flex;
		align-items: center;
		height: 214rpx;
		flex-wrap: nowrap;
		flex-direction: row;
		background: $uni-bg-color;
	}

	.wrap {
		// padding-top: 696rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.itemContent {
			width: 330rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
			// background-image: url('../../static/bg2.png');
			// background-size: 100%;
		}
	}

	.home-near {
		background: $uni-bg-color;
		height: 180rpx;
		margin-bottom: 10rpx;

		.nearby {
			width: 670rpx;
			margin: auto;
			background: #F6F7FB;
			padding-top: 30rpx;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			text {
				font-weight: bold;
				margin-left: 30rpx;
			}

			.near {
				display: flex;
				justify-content: space-around;
				margin-top: 18rpx;

				.item {
					width: 190rpx;
					background: $uni-bg-color;
					border-radius: 20rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 26rpx;
					color: $uni-text-color-grey;
				}
			}
		}
	}

	.work {
		width: 680rpx;
		// margin: auto;
		background: var(--white);
		padding: 50rpx 30rpx 0;
		.title {
			background: $uni-bg-color;
			.title-inner {
				width: 680rpx;
				height: 120rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid $uni-bg-color-grey;

				text {
					font-size: 42rpx;
					font-weight: bold;
				}
			}
		}
	}

	.loader {
		background: #fff;
		padding: 30rpx 0;

		view {
			border: 10rpx solid #fff;
			border-top: 10rpx solid $uni-color-primary;
			border-right: 10rpx solid #91DAD3;
			border-bottom: 10rpx solid #B0EBE5;
			border-left: 10rpx solid #E2F7F0;
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			animation: spin .8s linear infinite;
			margin: auto;
		}
	}

	.noMore {
		color: $uni-text-color-grey;
		background: #fff;
		padding: 30rpx 0;
		font-size: 28rpx;
		text-align: center;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
